<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    :close-on-click-modal="false"
    title="数据列表"
    width="1200"
    :before-close="handleClose"
    :z-index="2000"
  >
    <div class="vxeClass">
      <VTable ref="tableRef" v-bind="tableOptins" style="height: 600px">
        <template #form="{ form }"></template>
        <template #toolbar_btns> </template>
      </VTable>
    </div>

    <!-- <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
      "
    >
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary">
        {{ buttonTitle }} 
      </el-button>
    </div> -->
  </el-dialog>
</template>

<script lang="jsx" setup>
import { ref } from "vue";
// import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false);
const load = ref(false);
const open = async (_) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  dialogVisible.value = true;
};
const handleClose = (done) => {
  done();
  // ElMessageBox.confirm('Are you sure to close this dialog?')
  //   .then(() => {
  //     done()
  //   })
  //   .catch(() => {
  //     // catch error
  //   })
};
// defineProps({
//   title: {
//     type: String,
//     default: () => "dialogTitle",
//   },
//   buttonTitle: {
//     type: String,
//     default: () => "确认",
//   },
// });
defineExpose({ open });
const promiseArr = () => {
  return Promise.resolve({
    data: [
      {
        id: 10001,
        name: "Test1",
        logistics_name: "T1",
        role: "Develop",
        sex: "Man",
        age: 28,
        address: "Shenzhen",
      },
      {
        id: 10002,
        name: "Test2",
        logistics_name: "T2",
        role: "Test",
        sex: "Women",
        age: 22,
        address: "Guangzhou",
      },
    ],
  });
};
// 列表配置
const tableOptins = reactive({
  rowConfig: { height: "auto" },
  showOverflow: false,
  columns: [
    { type: "checkbox", fixed: "left" },
    {
      field: "logistics_code12",
      title: "任务",
      minWidth: 300,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div>
              <div style="color:#FAAD14">代运营审核</div>
              <div style="color:#3366f1">TP12312412</div>
              <div style="display:inline-block;margin-right:4px;">预期2023/03/20</div>
              <span style="color:#fff;background:#3366f1;border-radius: 5px 0px 5px 5px;padding:1px 4px;">
                按时
              </span>
            </div>,
          ];
        },
      },
    },
    {
      field: "logistics_name12",
      title: "任务图片",
      minWidth: 300,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div class={"clearfix"}>
              <span
                class={"fl"}
                style={
                  "display:inline-block;text-align:center;width: 20px;height: 20px;background: #3366F1;color:#fff"
                }
              >
                C
              </span>
              <span
                class={"fl"}
                style={
                  "text-overflow:ellipsis ;white-space:nowrap ;overflow:hidden;width:180px;"
                }
              >
                主图设计、详情页设计、修图-精修、详情页备份 2
              </span>
              <span style={"color:#3366f1"}>更多</span>
              <div style={"color:#3366f1"}>查看</div>
            </div>,
          ];
        },
      },
    },
    {
      field: "status_name22",
      title: "任务说明",
      minWidth: 300,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div>
              <div>新品| 品牌A、品牌B、品牌C</div>
              <div style={"color:#b4b8c1"}>
                备注信息xxxxxxx<span style={"color:#3366f1"}>查看</span>
              </div>
            </div>,
          ];
        },
      },
    },
    {
      field: "update_user11",
      title: "SPU信息",
      minWidth: 100,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div>
              <div>SPU:xxxx</div>
              <div>单属性</div>
            </div>,
          ];
        },
      },
    },
    {
      field: "update_time2",
      title: "SKU/自定义",
      minWidth: 100,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div>
              <div style={"color:#3366f1"}>4221928</div>
              <div>H-CP1678</div>
            </div>,
          ];
        },
      },
    },
    {
      field: "update_time1",
      title: "分类",
      minWidth: 200,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div>
              <div>海外仓汽摩配类 汽车OE配件 涡轮周边备份</div>
              <div>xxxx商品名称 </div>
            </div>,
          ];
        },
      },
    },
    {
      field: "update_time121",
      title: "审核备注",
      minWidth: 150,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div>
              <div>
                审核备注信息备<span style={"color:#3366f1"}>查看</span>
              </div>
              <div>
                产品开发备注信息备<span style={"color:#3366f1"}>查看</span>
              </div>
            </div>,
          ];
        },
      },
    },
    {
      field: "update_time222",
      title: "人员",
      minWidth: 350,
      slots: {
        default: ({ row, rowIndex }) => {
          const { lc_id, status } = row;
          return [
            <div
              style={"display: flex;justify-content: space-between;align-items: center;"}
            >
              <div>
                <div>
                  <span>开发</span> <span>xxx</span>
                </div>
                <div>
                  <span>运营</span> <span>xxx</span>
                </div>
                <div>
                  <span>图片</span> <span>xxx</span>
                </div>
                <div>
                  <span>摄影</span> <span>xxx</span>
                </div>
              </div>
              <div>
                <div>
                  <span>编辑</span> <span>xxx</span>
                </div>
                <div>
                  <span>审核</span> <span>xxx</span>
                </div>
                <div>
                  <span>修改</span> <span>xxx</span>
                </div>
              </div>
              <div>
                <div>
                  <span>修改</span> <span>2023/03/13 11:30:59</span>
                </div>
              </div>
            </div>,
          ];
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => promiseArr(),
    },
  },
});
</script>
<style scoped>
.vxeClass :deep(.vx-table__form) {
  display: none !important;
}
</style>
